<template>
<div class="w-full h-[100%] border-solid border-[1px] border-[var(--grid)] flex flex-row justify-between items-center px-[16px] bg-[var(--theme)] s4k:px-[32px] s2k:px-[21.3px] relative" style="border-left: none;border-right: none;border-bottom: none;">
  <div class="text-[1.13rem] text-[#9CA3AF] font-Medium">
    Showing <span class="text-[var(--theme-font-color)]">1-10</span> of <span class="text-[var(--theme-font-color)]">1000</span>
  </div>
  <fwb-pagination @page-changed="pageChanged" id="pagination" v-model="currentPage" :total-pages="1000" show-icons previous-label="" next-label=""></fwb-pagination>
  <div class="w-[23.177vw] flex flex-row justify-between items-center h-[37px] s4k:h-[74px] s2k:h-[49.3px] absolute left-[50%] top-[50%] transform -translate-x-1/2 -translate-y-1/2">
    <svg-icon name="uploadFile" width="10px" height="16px" class="svgClass s2ksvg s4ksvg mr-[10px] s2k:mr-[13.3px] s4k:mr-[20px] cursor-pointer" @click="show"></svg-icon>
    <svg-icon v-if="VoiceIndex == 1" name="voice" width="16px" height="16px" class="svgClass s2ksvg s4ksvg absolute right-[85px] s2k:right-[113.3px] s4k:right-[170px] z-[999] cursor-pointer" @click="VoiceClick"></svg-icon>
    <div v-else-if="VoiceIndex == 2" class="flex flex-row justify-center items-center absolute right-[85px] s2k:right-[113.3px] s4k:right-[170px] z-[999] ">
      <svg-icon name="talk" width="16px" height="16px" class="svgLogo s2ksvg s4ksvg cursor-pointer"></svg-icon>
      <span class="text-[1.13rem] text-[var(--theme-font-color)] font-Inter mx-[10px] s2k:mx-[13.3px] s4k:mx-[20px]">2:15</span>
      <svg-icon name="vsstore" width="16px" height="16px" class="svgLogo s2ksvg s4ksvg cursor-pointer"></svg-icon>
    </div>
    <div v-else-if="VoiceIndex == 3" class="flex flex-row justify-center items-center absolute right-[85px] s2k:right-[113.3px] s4k:right-[170px] z-[999] ">
      <span class="text-[1.13rem] text-[var(--theme-font-desc-color)] font-Inter mr-[10px] s2k:mr-[13.3px] s4k:mr-[20px]">Converting to text...</span>
      <div class="loader"></div>
    </div>
    <div
      :class="[
        'w-[258px] divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 absolute bottom-[45px] left-0 bd-4b z-[999_!important]',
        's4k:w-[308px] s4k:top-[100px] s4k:rounded-[16px]',
        's2k:w-[205px] s2k:h-[54px] s2k:top-[60px]',
      ]"
      v-show="fileShow"
    >
      <ul
        class="text-[1.13rem] py-2 list-none bg-[var(--theme)] border border-solid border-[var(--theme-button-bg)] rounded-[8px] s4k:rounded-[16px]"
        aria-labelledby="dropdownDefaultButton"
      >
        <li
          class="py-[3px] m-0 list-none text-[1.13rem] font-normal hover:bg-[var(--theme-hover)] s2k:py-[4px] s4k:py-[6px]"
          @click="back"
        >
          <a
            href="javaScript:;"
            class="flex flex-row justify-start items-center text-[var(--theme-font-color)] px-4 py-2 dark:hover:bg-gray-600 s4k:px-8 s4k:py-4 s4k:pr-0"
            style="text-decoration: none"
            >
            <svg-icon name="google-drive" width="20px" height="20px" class="s2ksvg s4ksvg mr-[10px] s2k:mr-[13.3px] s4k:mr-[20px]"></svg-icon>
            Connect to Google Drive</a
          >
        </li>
        <li
          class="py-[3px] m-0 list-none text-[1.13rem] font-normal hover:bg-[var(--theme-hover)] s2k:py-[4px] s4k:py-[6px]"
          @click="back"
        >
          <a
            href="javaScript:;"
            class="flex flex-row justify-start items-center text-[var(--theme-font-color)] px-4 py-2 dark:hover:bg-gray-600 s4k:px-8 s4k:py-4 s4k:pr-0"
            style="text-decoration: none;"
            ><svg-icon name="dropbox" width="20px" height="20px" class="s2ksvg s4ksvg mr-[10px] s2k:mr-[13.3px] s4k:mr-[20px]"></svg-icon>Connect to Dropbox</a
          >
        </li>
        <li
          class="py-[3px] m-0 list-none text-[1.13rem] font-normal hover:bg-[var(--theme-hover)] s2k:py-[4px] s4k:py-[6px]"
          @click="back"
        >
          <a
            href="javaScript:;"
            class="text-[var(--theme-font-color)] block px-4 py-2 dark:hover:bg-gray-600 s4k:px-8 s4k:py-4"
            style="text-decoration: none;"
            ><svg-icon name="download2" width="20px" height="20px" class="svgClass s2ksvg s4ksvg mr-[10px] s2k:mr-[13.3px] s4k:mr-[20px]"></svg-icon>Upload from computer</a
          >
        </li>
      </ul>
    </div>
    <fwb-input v-model="searchCamera" placeholder="Search for a Recording" id="searchCamera" style="width: 100%;">
      <template #prefix>
        <svg aria-hidden="true"
          class="w-5 h-5 text-gray-500 dark:text-gray-400 s4k:w-8 s4k:h-8 s2k:h-[26.6px] s2k:w-[25.5px]"
          fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round"
            stroke-width="2" />
        </svg>
      </template>
    </fwb-input>
    <button class="w-[90px] h-[38px] bg-[var(--theme-button-bg)] text-[var(--theme-font-color)] border-solid rounded-r-md border-[var(--grid)] border-[1px] cursor-pointer text-[1.13rem]
        s4k:w-[180px] s4k:h-[76px] s2k:w-[120px] s2k:h-[50.6px] s2k:rounded-r-[8px]">
      Search
    </button>
  </div>
  <div class="mask" v-show="maskShow" @click="back"></div>
</div>
  
</template>

<script setup>
import { FwbPagination,FwbInput } from 'flowbite-vue'
import { onMounted ,reactive,ref} from "vue";
const searchCamera = ref(' ')
const maskShow = ref(false); // 遮罩层
const fileShow = ref(false); // 选择文件
const currentPage = ref(1)
// 页码变化
const pageChanged = (val) => {
  console.log('val',val)
}
const back = () => {
  fileShow.value = false;
  maskShow.value = false;
}
const show = () => {
  fileShow.value = !fileShow.value;
  maskShow.value = true;
};
const VoiceIndex = ref(1)
// 语音效果
const delay = (ms) => {
  return new Promise(resolve => setTimeout(resolve, ms));
}
const VoiceClick = () => {
  VoiceIndex.value = 2;
  delay(2000)
    .then(() => {
      VoiceIndex.value = 3;
      return delay(2000);
    })
    .then(() => {
      VoiceIndex.value = 1
    });
}
</script>

<style scoped lang="scss">
.mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
.loader{
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: conic-gradient(
        #3e8ef7 20%,
        var(--theme-search-bg) 10% 100%
    );
  animation: rotate 1s linear infinite;
  &:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 50%;
    background-color: var(--theme);
  }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
#pagination{
  margin-right: 32px;
  :deep(button){
    border: solid var(--grid) 1px;
    border-right: none;
    border-radius: 0;
    width: 32px;
    height: 32px;
    font-size: 1.13rem;
    color: #9CA3AF;
    background-color: var(--theme);
    cursor: pointer;
    &:last-child{
      padding-left: 7px;
      padding-right: 7px;
      border-right: solid var(--grid) 1px;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
      svg{
        transform: scale(1.3);
      }
    }
    &:first-child{
      padding-left: 7px;
      padding-right: 7px;
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
      svg{
        transform: scale(1.3);
      }
    }
  }
  :deep(.text-blue-600){
    color:var(--theme-font-color);
    font-weight: 600;
    background-color: var(--layout-progress-bg);
  }
}
#searchCamera {
  padding: 0;

  :deep(input) {
    padding-top: 0;
    padding-bottom: 0;
    height: 36px;
    background-color: var(--theme);
    border: solid var(--grid) 1px;
    font-size: 1.13rem;
    font-family: Medium;
    color: #ffffff;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;

    &:focus {
      box-shadow: inset 0 0;
    }
  }
}
@media screen and (min-width: 2560px) {
  .s2ksvg {
    transform: scale(1.3);
  }
  #searchCamera {
    :deep(input) {
      height: 48px;
      padding-left: 40px;
    }
  }
  #pagination{
    margin-right: 42.6px;
    :deep(button){
      width: 50px;
      height: 50px;
      &:last-child{
        padding-left: 9.3px;
        padding-right: 9.3px;
        svg{
          transform: scale(1.5);
        }
      }
      &:first-child{
        padding-left: 9.3px;
        padding-right: 9.3px;
        svg{
          transform: scale(1.5);
        }
      }
    }
  }
}
@media screen and (min-width: 3840px) {
  .s4ksvg {
    transform: scale(2);
  }
  #searchCamera {
    :deep(input) {
      height: 72px;
      padding-left: 100px;
    }
  }
  #pagination{
    margin-right: 64px;
    :deep(button){
      height: 64px;
      &:last-child{
        padding-left: 14px;
        padding-right: 14px;
        svg{
          transform: scale(2);
        }
      }
      &:first-child{
        padding-left: 14px;
        padding-right: 14px;
        svg{
          transform: scale(2);
        }
      }
    }
  }
}
</style>